@import 'themes';
@import 'repl-common';
@import 'repl-container-left';
@import 'repl-container-right';
@import 'repl-status-bar';
@import 'repl-suggestions';
@import 'repl-preferences';
@import 'repl-editor';

html{
  height: 100%;
}

@mixin repl($theme) {
  #node-repl-plus {
    font-size: 0.9em;
    margin: 5px 0px;
    @include selectable();

    .repl-container {
      display: flex;
      @include containerLeft($theme);
      @include containerRight($theme);
      @include statusBar($theme);
    }
  }

  #node-repl-prompt-suggestions {
    @include suggestions($theme);
  }

  #node-repl-preferences {
    @include preferences($theme);
  }
  @include replEditor($theme);
}

body {
  min-height: 100%;
  max-height: 100%;
  margin: 0;
  font-size: $app-font-size;
  font-family: $app-font-family;
  -webkit-font-feature-settings: 'liga' 1, 'kern' 1;
  font-feature-settings: 'liga' 1, 'kern' 1;
  @include notSelectable();

  &:before {
    content: attr(data-watermark-logo);
    position: fixed;
    top: 40vh;
    // 2 characters
    left: calc((100vw - 20vh * 2 / 2)/2);
    font-size: 20vh;
    font-family: 'Josefin Sans', sans-serif;
    pointer-events: none;
    z-index: 10;
  }
  &:after {
    content: attr(data-watermark-msg);
    position: fixed;
    top: 56vh;
    // 16 characters
    left: calc((100vw - 2vh * 16 / 2)/2);
    font-size: 2vh;
    pointer-events: none;
    z-index: 10;
  }
}

body.dark-theme {
  background-color: $dark-app-background-color;
  color: $dark-app-color;
  &:before, &:after {
    color: $dark-app-water-mark-color;
  }
  @include repl($dark-theme);
}

body.light-theme {
  background-color: $lt-app-background-color;
  color: $lt-app-color;
  &:before, &:after {
    color: $lt-app-water-mark-color;
  }
  @include repl($light-theme);
}

pre {
  @include editor();
}

::selection {
  background-color: $app-text-selection-background-color;
  color: $app-text-selection-color;
}

.hide {
  display: none !important;
}
